<template>
  <div class="home">
    <h2>{{ $route.query.title }}</h2>
    <div class="home-nav">
      111
      <router-link to="/home/recommend">推荐</router-link>
      <router-link to="/home/ranking">排行</router-link>
      <span @click="rankBtnClick">去排行</span>
    </div>

    <router-view></router-view>
  </div>
</template>

<script setup>
  import { onMounted } from "vue"
  import { useRouter } from "vue-router";

  const router = useRouter()

  function rankBtnClick(params) {
    router.push({
      path: "/home/ranking",
      query: {
        rankList: JSON.stringify([
          {name: "aaa"},
          {name: "vvvv"},
          {name: "dddd"},
          {name: "wwww"},
          {name: "fff"},
          // 1,2,3,4
        ])
      }
    })
  }

  onMounted(() => {
    console.log('onmounted')
  })

</script>

<style scoped>
</style>